<template>
    <div class="container">
        <van-nav-bar title="店内车辆" class="navBar" left-arrow @click-left="back()"></van-nav-bar>
        <div class="car-list">
            <div class="car">
                <div class="info">
                    <p><span>车牌号：</span> 京A88888</p>
                    <p><span>进场时间：</span> 2021-06-13 17:44:21</p>
                </div>
                <div class="detailMsg">
                    <div class="user">
                        <p><span>车主姓名：</span> 刘先生</p>
                        <p class="phone">
                            <span>进场时间：</span> 15111111111
                            <van-image :src="fz" class="copy"  />
                            <van-button class="call" icon="phone" round type="primary" plain size="small" color="#5E2F88">呼叫</van-button>
                        </p>
                        <!-- <p>
                            <span>进场时间：</span> 
                            2021-06-13 17:44:21 
                            <van-image :src="fz" class="copy"  />
                            <van-button class="call" icon="phone" round type="primary" plain size="small" color="#5E2F88">呼叫</van-button>
                        </p> -->
                    </div>
                    <div class="combo">
                        <h4>套餐项目余量</h4>
                        <ul>
                            <li>
                                <div>进口合成机油</div>
                                <div>剩余：400L</div>
                            </li>
                            <li>
                                <div>50瓶玻璃水</div>
                                <div>剩余：30瓶</div>
                            </li>
                        </ul>
                    </div>
                    <div class="btn">
                        <button>收起</button>
                        <van-icon name="arrow-up" color="#8195A5"/>
                    </div>
                </div>
            </div>
            <div class="car">
                <div class="info">
                    <p><span>车牌号：</span>京A12345</p>
                    <p><span>进场时间：</span> 2021-06-13 17:44:21</p>
                    <div class="btn">
                        <button>查看详情</button>
                        <van-icon name="arrow-down" color="#8195A5"/>
                    </div>
                </div>
            </div>
            <div class="car">
                <div class="info">
                    <p><span>车牌号：</span> 陕A8271C</p>
                    <p><span>进场时间：</span> 2021-06-13 17:44:21</p>
                    <!-- <div class="btn">
                        <button>非会员</button>
                    </div> -->
                </div>
            </div>
        </div>
        <footer>
            <van-button icon="replay" round type="primary"  color="rgba(94, 47, 136, 1)">刷新</van-button>
            <div class="bar"></div>
        </footer>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router"
import fz from 'assets/fz.png';

const router = useRouter()
const back = () => {
    router.back();
}
</script>
<style lang="scss" scoped>
.container {
    background: #F1F5F8;
    height: 100vh;
    .navBar{
        background: #fff;
    }
    .car-list {
        height: 77%;
        overflow-y: auto;
        padding: 1.25rem /* 20/16 */;
        text-align: left;
        padding-bottom:5.625rem /* 90/16 */;
        .car {
            background: #FFFFFF;
            border-radius: .625rem /* 10/16 */;
            margin-bottom:.9375rem /* 15/16 */;
            padding:.9375rem /* 15/16 */ .9375rem /* 15/16 */ .625rem /* 10/16 */ .9375rem /* 15/16 */;
            p{
                margin:0;
                font-size: 1rem /* 16/16 */;
                font-family: PingFang SC;
                font-weight: 500;
                color: #101D34;
                line-height: 1.875rem /* 30/16 */;
                span{
                    font-weight: 400;
                    color: #49596D;
                    width: 5.625rem /* 90/16 */;
                    display: inline-block;
                }
                .copy{
                    width:1.25rem /* 20/16 */;
                    height: 1.25rem /* 20/16 */;
                    margin-left:.1875rem /* 3/16 */;
                }
                button{
                    width:4.6875rem /* 75/16 */;
                    height:1.5625rem /* 25/16 */;
                    margin-left:.9375rem /* 15/16 */;
                    font-size: 1rem /* 16/16 */;
                }
            }
            .phone{
                display: flex;
                align-items: center;
            }
            .btn{
                text-align: center;
                button{
                    margin:auto;
                    font-size: .8125rem /* 13/16 */;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #8195A5;
                    background: transparent;
                    border:none;
                }
            }
            .detailMsg{
                border-top:1px solid #E5EBEF;
                margin-top:1.25rem /* 20/16 */;
                padding-top:.9375rem /* 15/16 */;
            }
            .combo{
                height: 4.625rem /* 74/16 */;
                background: rgba(94, 47, 136, 0.04);
                border-radius: .625rem /* 10/16 */;
                padding:.9375rem /* 15/16 */;
                margin:.9375rem /* 15/16 */ 0;
                h4{
                    font-size: 1rem /* 16/16 */;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #101D34;
                    margin:0 0 .3125rem /* 5/16 */ 0;
                }
                ul{
                    li{
                        display: flex;
                        justify-content: space-between;
                        div{
                            font-size: .875rem /* 14/16 */;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #5E2F88;
                            line-height: 1.5625rem /* 25/16 */;
                        }
                    }
                }
            }
        }
    }
}

footer {
    width: 100%;
    height: 5.625rem /* 90/16 */;
    background: #FFFFFF;
    box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
    border-radius: .9375rem /* 15/16 */ .9375rem /* 15/16 */ 0px 0px;
    position: fixed;
    bottom: 0;
    text-align: center;
    button{
        width: 18.125rem /* 290/16 */;
        height: 2.75rem /* 44/16 */;
        margin-top:1.25rem /* 20/16 */;
        border:none;
        outline: none;
    }
    .bar{
        width: 8.375rem /* 134/16 */;
        height: .3125rem /* 5/16 */;
        background: #000000;
        border-radius: .15625rem /* 2.5/16 */;
        margin:13px auto 0;
    }
}
</style>